<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		@font-face {
		  font-family: 'iconfont';
		  src: url('font/iconfont.woff2?t=1628130654031') format('woff2'),
		       url('font/iconfont.woff?t=1628130654031') format('woff'),
		       url('font/iconfont.ttf?t=1628130654031') format('truetype');
		}
		.iconfont {
		  font-family: "iconfont" !important;
		  font-size: 16px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		}
		
		a {
			color: #000000;
			text-decoration: none;
		}

		.box1 {
			width: 200px;
			height: 200px;
			background-color: #8A2BE2;
		}

		.box2 {
			width: 200px;
			height: 200px;
			background-color: blue;
		}

		.box3 {
			width: 100px;
			height: 100px;
			margin-top: 50px;
			background: pink;
			overflow: hidden;
		}
		.iconfont:hover{
			color: gray !important;
			cursor: move;
		}
		.box {
			width: 150px;
			height: 50px;
			background-color: #00A4FF;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.bout {
			position: relative;
			width: 200px;
			height: 220px;
		}
		.b3 {
			position: absolute;
			bottom: 0;
			width: 200px;
			height: 200px;
			background-color: red;
			color: white;
			text-align: center;
			line-height: 200px;
			font-size: 22px;
			
		}
		.sanjiao {
			position: absolute;
			right: 0px;
			margin-top: -40px;
			width: 0;
			height: 0;
			border: 20px solid transparent;
			border-bottom-color: red;
		}
		.b3:hover {
			transition: box-shadow 1s;
			box-shadow: 5px 5px 10px black;
		}
		img {
			vertical-align: middle;
		}
		.sanjiao2 {
			width: 0;
			height: 0;
			border-top: 200px solid transparent;
			border-right: 100px solid green;
			border-bottom: 0 solid yellow;
			border-left: 0 solid green;
		}
		.sanjiao2:hover {
			transition: border-right-color 1s;
			border-right-color: red;
		}
		li {
			list-style: none;
			float: left;
			margin-right: 10px;
			text-align: center;
			display: block;
			width: 50px;
			height: 30px;
			line-height: 30px;
		}
		ul li:nth-child(even) {
			color: red;
			border: 1px solid red;
		}
		
		ul li:nth-child(2n+1) {
			color: green;
			border: 1px solid green;
		}
		ul::after {
			content: '';
			display: block;
			clear: both;
			height: 0;
			visibility: hidden;
		}

		.after {
			width: 100px;
			height: 50px;
			background-color: red;
		}
		.after:hover::after{
			content: '250';
			font-size: 26px;
			color: green;
			line-height: 50px;
			text-align: center;
			background-color: white;
			display: block;
			width: 50%;
			height: 100%;
			margin: 0 auto;
			border-radius: 25px;
		}
		.blur {
			transition: filter 3s;
			filter: blur(5px);
		}
		.blur:hover {
			filter: blur(0);
		}
		.a1 {
			width: 500px;
			height: 100px;
			background-color: red;
			margin: 0 auto;
		}
		.a2 {
			width: calc(100%/2);
			height: 50px;
			background-color: #0000FF;
			margin: calc(100%/10) auto;
		}
		.a3 {
			transition: width 3s;
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.a3:hover{
			width: 100%;
		}
		.a4 {
			width: 300px;
			height: 300px;
			border: 1px solid red;
		}
		.a5 {
			width: 100%;
			height: 100%;
			background-color: #008000;
		}
		
	</style>
	<body>

		<a href="#"><span class="iconfont" style="font-size: 50px;color: red;">&#xe664;</span></a>
	    <div class="box">
			测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
		</div>
		<br><hr>
		<div class="bout">
			<div class="b3">
				<div class="sanjiao"></div>
				哈哈哈哈
			</div>
		</div>
		<hr >
		<img src="img/user.png" >&nbsp; usrname
		<hr >
		<div class="sanjiao2"></div>
		<input type="color" name="" id="" value="" />
		<input type="search" name="" id="" value="" />
		<input type="email" name="" id="" value="" />
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
		</ul>
		<div class="after"></div>
		<img src="img/1.webp.jpg" alt="" class="blur">
		<div class="a1">
			<div class="a2"></div>
		</div><hr >
		<div class="a3"></div>aaa
		<div class="a4">
			<div class="a5"></div>
		</div>
	</body>
</html>
